<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field.options.displayStyle"
  >
    <div class="scene-DRC-patient-info-widget" :style="getStyle('area')" :key="compsKey">
      <div class="dept-room"
           :style="getStyle('deptInfo')"
           :data-dept-info="getRoomDeptInfo"
           :class="`dept-info-${optionsInfo['checkedList'].length}`"
      >
        <!--选中一个-->
        <template v-if="optionsInfo['checkedList'].length===1">
          <p class="dept-name item">
            <ScrollX :style="getStyle('dept')">
              {{ getDeptRoomInfo }}
            </ScrollX>
          </p>
        </template>
        <!--选中二个-->
        <template v-if="optionsInfo['checkedList'].length===2">
          <!--   选中的二个有科室  -->
          <template v-if="optionsInfo['checkedList'].includes('deptName')">
            <p class="dept-name item" v-if="optionsInfo['checkedList'].includes('deptName')">
              <ScrollX :style="getStyle('dept')">{{ getRoomDeptInfo.deptName || '\u00a0' }}</ScrollX>
            </p>
            <p class="room-number item" v-if="optionsInfo['checkedList'].includes('roomName')">
              <ScrollX :style="getStyle('room')">
                {{ getRoomDeptInfo[optionsInfo['roomNameKey']] || getRoomDeptInfo['roomName'] || '\u00a0' }}
              </ScrollX>
            </p>
            <p class="room-number item" v-if="optionsInfo['checkedList'].includes('registerObjName')">
              <ScrollX :style="getStyle('room')">
                {{ getParentRegisterObjName || '\u00a0' }}
              </ScrollX>
            </p>
          </template>
          <template v-else>
            <!--   选中的二个无科室 必然是诊室和号别  -->
            <p class="dept-name item" v-if="optionsInfo['checkedList'].includes('roomName')">
              <ScrollX :style="getStyle('dept')">
                {{ getRoomDeptInfo[optionsInfo['roomNameKey']] || getRoomDeptInfo['roomName'] || '\u00a0' }}
              </ScrollX>
            </p>
            <p class="room-number item" v-if="optionsInfo['checkedList'].includes('registerObjName')">
              <ScrollX :style="getStyle('room')">
                {{ getParentRegisterObjName || '\u00a0' }}
              </ScrollX>
            </p>
          </template>
        </template>
      </div>

      <!--患者信息-->
      <!--      :class="`patient-info-${optionsInfo['checkedList'].length}`"-->
      <div class="patient-info" :class="`patient-info-${optionsInfo['waitPatientType']}`">
        <template v-for="item in getRoomDoctorInfo">
          <!--就诊-->
          <div class="item current-patient flex-box" :style="getStyle('currentAre')"
               :class="getPatientClassName('current-patient')">
            <div class="title flex-box-left" :style="getStyle('currentTitle')">
              {{ optionsInfo?.current?.title || '就诊' }}
            </div>
            <div class="content flex-box-right" :class="{'current-patient-info': currentScrollInfo(item)}">
              <div class="scroll-info" v-if="currentScrollInfo(item)">
                <vue-seamless-scroll
                    class="scroll"
                    :class="{'scroll-hide-waiting': optionsInfo.waitingPatientHide}"
                    :ref="`scroll-${item.workerId}`"
                    :class-option="currentScrollOptionScroll"
                    :data="(item.treatingPatient)"
                >
                  <template v-for="PatientItem in (item.treatingPatient)">
                    <p class="item">
                      {{ (PatientItem.orderNo) || '\u00a0' }}
                      {{ (PatientItem.patientName) || '\u00a0' }}
                    </p>
                  </template>
                </vue-seamless-scroll>
              </div>
              <template v-else>
                <p v-for="PatientItem in (item.treatingPatient)">
                  {{ (PatientItem.orderNo) || '\u00a0' }}
                  {{ (PatientItem.patientName) || '\u00a0' }}
                </p>
              </template>
            </div>
          </div>

          <!--候诊-->
          <div class="item wait-patient flex-box" :style="getStyle('waitingAre')"
               :class="getPatientClassName('wait-patient')">
            <div class="title flex-box-left" :style="getStyle('waitingTitle')">
              {{ optionsInfo?.waiting?.title || '候诊' }}
            </div>
            <!--诊室等待-->
            <template v-if="(optionsInfo?.waitPatientType) ===1">
              <div class="content flex-box-right" :class="`${roomWaitClassName(item.waitingPatientList)}-wrap`">
                <vue-seamless-scroll
                    class="scroll"
                    :ref="`scroll-${item.workerId}`"
                    :class="roomWaitClassName(item.waitingPatientList)"
                    :data="getWaitingPatientList(item.waitingPatientList)"
                    :class-option="roomWaitOptionScroll(item.waitingPatientList)"
                >
                  <p v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                     :key="`${item2.patientIdNo}-${index}`" v-if="true">
                    {{ item2.orderNo || '\u00a0' }} {{ item2.patientName || '\u00a0' }}
                  </p>
                </vue-seamless-scroll>
              </div>
            </template>
            <!--候诊列表-->
            <template v-else-if="(optionsInfo?.waitPatientType) ===2">
              <div class="content flex-box-right scroll-area" :class="scrollListClassName(item.waitingPatientList)">
                <!--滚动-->
                <template v-if="waitPatientListInfo(item.waitingPatientList)">
                  <vue-seamless-scroll
                      class="scroll"
                      :ref="`scroll-${item.workerId}`"
                      :class-option="roomWaitListOptionScroll(item.waitingPatientList)"
                      :data="getWaitingPatientList(item.waitingPatientList)"
                      :class="{'scroll-area-center': getWaitingPatientList(item.waitingPatientList).length<=5 }"
                  >
                    <div class="inside-content"
                         :class="roomWaitListClassName(item.waitingPatientList)">
                      <div class="patient"
                           v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                           :key="`${(item2.queuingId) || index}-${(item2.patientIdNo) || index}`"
                      >
                        <span class="patient-orderNo" v-if="!!(item2.orderNo)">
                          {{ item2.orderNo }}
                        </span>
                        <template>
                          {{ item2.patientName || '' }}
                        </template>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                </template>
                <!--不滚动-->
                <template v-else>
                  <div class="no-scroll-area" :class="roomWaitListClassName((item.waitingPatientList), false)">
                    <p v-for="(item2,index) in getWaitingPatientList(item.waitingPatientList)"
                       :key="`${item2.patientIdNo}-${index}`">
                      {{ item2.orderNo || '\u00a0' }} {{ item2.patientName || '\u00a0' }}
                    </p>
                  </div>
                </template>
              </div>
            </template>
          </div>
        </template>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {v4 as uuid} from 'uuid'
import {NoticeBar, Swipe, SwipeItem} from "vant";
import emitter from "@/utils/designer/emitter";
import {pxToVw} from '@/utils/common';
import ScrollX from '@c/public/seamlessScroll/ScrollX.vue'
import ScrollY from '@c/public/seamlessScroll/ScrollY.vue';
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import {buildParentApi} from "@/utils/designer/util";
import vueSeamlessScroll from 'vue-seamless-scroll';

let buildParent = buildParentApi();
export default {
  name: "scene-DRC-patient-info-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    CompOperate,
    NoticeBar,
    Swipe,
    SwipeItem,
    ScrollY,
    ScrollX,
    vueSeamlessScroll
  },

  props: {
    widget: Object,
    devType: {
      type: Boolean,
      default: false,
    },
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      compsKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
      pause: require("@a/images/design/pause.png"),
    }
  },

  computed: {
    //候诊等待-候诊患者滚动设置
    roomWaitOptionScroll() {
      return function (row) {
        let {waiting} = (this.optionsInfo);
        let waitPatientList = this.getWaitingPatientList(row);
        let scrollStep = (waiting?.scrollStep);
        // let scroll = (waiting.scroll);
        let scroll = (waitPatientList?.length > 4);
        return {
          hoverStop: true,
          direction: 1,                               // 0向下 1向上 2向左 3向右
          isSingleRemUnit: true,
          step: [1, 1.5, 2, 2.5, 3][scrollStep - 1], // 数值越大速度滚动越快
          limitMoveNum: scroll ? 4 : 9999, // 开始无缝滚动的数据量 this.dataList.length
        };
      }
    },

    //候诊等待-className
    roomWaitClassName() {
      return function (row) {
        let waitPatientList = this.getWaitingPatientList(row);
        let type = waitPatientList?.length || 1
        switch (type) {
          case 1:
            return 'scroll-info-1'
          case 2:
            return 'scroll-info-2'
          case 3:
            return 'scroll-info-3'
          case 4:
          case 5:
          case 6:
            return 'scroll-info-4'
        }
      }
    },

    //候诊列表-候诊患者滚动设置
    roomWaitListOptionScroll() {
      return function (row) {
        let {waiting, waitPatientNumber} = (this.optionsInfo)
        let scroll = (waiting.scroll);
        let scrollStep = (waiting.scrollStep);
        let scrollNumber = (waiting.scrollNumber);
        let waitPatientList = this.getWaitingPatientList(row);
        let scrollResult = waitPatientList?.length && waitPatientList.length > scrollNumber
        return {
          hoverStop: true,
          direction: 1,                               // 0向下 1向上 2向左 3向右
          isSingleRemUnit: true,
          step: [1, 1.5, 2, 2.5, 3][scrollStep - 1], // 数值越大速度滚动越快
          limitMoveNum: scroll && scrollResult ? scrollNumber : 999999, // 开始无缝滚动的数据量 this.dataList.length
        };
      }
    },

    //候诊列表-候诊患者滚动设置
    roomWaitListClassName() {
      return function (row) {
        let waitPatientList = this.getWaitingPatientList(row);
        let type = waitPatientList?.length || 1
        switch (type) {
          case 1:
            return 'scroll-list-info-1'
          case 2:
            return 'scroll-list-info-2'
          case 3:
            return 'scroll-list-info-3'
          case 4:
          case 5:
          case 6:
          default:
            return 'scroll-list-info-4'
        }
      }
    },

    // 就诊等待
    currentScrollOptionScroll() {
      let {waitPatientStep} = (this.optionsInfo)
      return {
        hoverStop: true,
        direction: 1,                               // 0向下 1向上 2向左 3向右
        isSingleRemUnit: true,
        step: [1, 1.5, 2, 2.5, 3][waitPatientStep - 1], // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
      };
    },

    // 判断当前患者是否滚动
    currentScrollInfo() {
      return function (info) {
        return !!(info.treatingPatient) && (info.treatingPatient.length) > 2
      }
    },

    scrollListClassName() {
      return function (patientList) {
        let {waiting} = this.optionsInfo;
        let scroll = (waiting.scroll);
        let waitPatientList = this.getWaitingPatientList(patientList);
        switch (waitPatientList?.length) {
          case 0:
          case 1:
          case 2:
          case 3:
          case 4:
            return scroll ? 'scroll-area-part' : 'no-scroll-area-part';
          case 5:
          case 6:
          default:
            return scroll ? 'scroll-area-all' : 'no-scroll-area-all';
        }
      }
    },

    // 判断候诊是否等待
    waitPatientListInfo() {
      return function (info) {
        let {waiting} = (this.optionsInfo)
        let scroll = (waiting.scroll);
        let itemInfo = (info?.length)
        let scrollNumber = (waiting.scrollNumber);
        return scroll && scrollNumber && (itemInfo > scrollNumber);
      }
    },

    // 设置的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.optionsInfo) || Array();
        let Obj = Object();
        switch (val) {
          case 'area':
            Reflect.set(Obj, 'height', pxToVw(info.areaHeight));
            return Obj;
          case 'deptInfo':
            Reflect.set(Obj, 'backgroundColor', (info?.deptInfoBackgroundColor));
            return Obj;
          case 'dept':
            Reflect.set(Obj, 'color', (info?.deptColor));
            return Obj;
          case 'room':
            Reflect.set(Obj, 'color', (info?.roomColor));
            Reflect.set(Obj, 'backgroundColor', (info.roomBackgroundColor));
            return Obj;
          case 'currentTitle':
            let currentInfo = info['current']
            if (!!currentInfo) {
              Reflect.set(Obj, 'fontSize', pxToVw(currentInfo?.titleFontSize));
              Reflect.set(Obj, 'width', pxToVw(currentInfo?.signWidth));
              Reflect.set(Obj, 'color', currentInfo['titleColor']);
              Reflect.set(Obj, 'backgroundColor', (currentInfo.titleBackgroundColor));
              return Obj;
            }
            break
          case 'waitingTitle':
            let waitingInfo = info['waiting'];
            if (!!waitingInfo) {
              Reflect.set(Obj, 'fontSize', pxToVw(waitingInfo?.titleFontSize));
              Reflect.set(Obj, 'width', pxToVw(waitingInfo?.signWidth));
              Reflect.set(Obj, 'titleColor', (waitingInfo['titleColor']));
              Reflect.set(Obj, 'backgroundColor', (waitingInfo?.titleBackgroundColor));
              return Obj;
            }
            break
          case 'currentAre':
            let currentInfo2 = info['current'];
            if (!!currentInfo2) {
              Reflect.set(Obj, 'backgroundColor', (currentInfo2?.areaBackgroundColor));
              return Obj;
            }
            break;
          case 'waitingAre':
            let waitingInfo2 = info['waiting'];
            if (!!waitingInfo2) {
              Reflect.set(Obj, 'backgroundColor', (waitingInfo2?.areaBackgroundColor));
              return Obj;
            }
            break
        }
      }
    },

    // 获取当前患者号别或原科室
    getParentRegisterObjName() {
      const self = this;
      let {registerObjNameKey} = (self.optionsInfo);
      let listInfo = (this.getRoomDoctorInfo);
      if (!!(listInfo?.length)) {
        let patientList = Array();
        if (listInfo[0]?.treatingPatient?.length) {
          patientList = listInfo[0].treatingPatient
        } else if (listInfo[0]?.preTreatingPatient?.length) {
          patientList = listInfo[0].preTreatingPatient
        } else {
          patientList = Array()
        }

        if (patientList?.length) {
          let registerObjNameInfo = Array();
          patientList.forEach((item) => {
            let temp = (item[registerObjNameKey] || item['registerObjName']);
            if (!!temp) {
              registerObjNameInfo.push(temp)
            }
          })
          // 去重
          let registerObjName = self.$lodash.compact(registerObjNameInfo);
          if (!!registerObjName && !!(registerObjName.length)) {
            return self.$lodash.uniq(registerObjName).join(',')
          }
        } else {
          return '\u00a0'
        }
      } else {
        return '\u00a0'
      }
    },

    // 诊室等待--设置不同模式下的等待患者样式
    getPatientClassName() {
      let {waitPatientMode, checkedList} = (this.optionsInfo);
      let listInfo = (this.getRoomDoctorInfo);
      let sliceInfo = listInfo.slice(0, 1);
      let summary = this.$lodash.map(sliceInfo, "waitingPatientList");
      let flattenArr = this.$lodash.flattenDeep(summary);
      let sliceWaitPatientInfo = flattenArr.slice(0, waitPatientMode)
      return function (type) {
        switch (type) {
          case 'current-patient':
            return parseInt(waitPatientMode) !== 1 ? 'current-patient' : 'current-patient2'
          case 'wait-patient':
            switch (waitPatientMode) {
              case 1:
                if (checkedList.includes('registerObjName') || checkedList.includes('roomName')) {
                  return 'wait-patient-top'
                } else {
                  return sliceWaitPatientInfo?.length === 1 && 'wait-patient'
                }
              case 2:
                if (checkedList.includes('registerObjName') || checkedList.includes('roomName')) {
                  return 'wait-patient2-top'
                } else {
                  return `wait-patient${sliceWaitPatientInfo?.length}`
                  // return 'wait-patient2'
                }
              case 3:
                if (checkedList.includes('registerObjName') || checkedList.includes('roomName')) {
                  return 'wait-patient3-top'
                } else {
                  return `wait-patient${sliceWaitPatientInfo?.length}`
                  // return 'wait-patient3'
                }
              case 4:
                if (checkedList.includes('registerObjName') || checkedList.includes('roomName')) {
                  return 'wait-patient4-top'
                } else {
                  return `wait-patient${sliceWaitPatientInfo?.length}`
                  // return 'wait-patient4'
                }
              case 5:
                if (checkedList.includes('registerObjName') || checkedList.includes('roomName')) {
                  return 'wait-patient5-top'
                } else {
                  return `wait-patient${sliceWaitPatientInfo?.length}`
                }
              case 6:
                if (checkedList.includes('registerObjName') || checkedList.includes('roomName')) {
                  return 'wait-patient6-top'
                } else {
                  return `wait-patient${sliceWaitPatientInfo?.length}`
                }
            }
        }
      }
    },

    // 候诊等待
    getWaitPatientNumber() {
      return function (row, scroll) {
        let waitingPatientList = this.getWaitingPatientList(row);
        if (scroll) {
          if (Array.isArray(waitingPatientList)) {
            return `scroll-area-${waitingPatientList.length}`
          } else {
            return `scroll-area`
          }
        } else {
          if (Array.isArray(waitingPatientList)) {
            if (waitingPatientList.length >= 6) {
              return `no-scroll-area-6`
            } else {
              return `no-scroll-area-${waitingPatientList.length}`
            }
          } else {
            return `no-scroll-area`
          }
        }

      }
    },

    // 获取全量医患信息
    getRoomDoctorInfo() {
      let temp = Array();
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDoctorInfo'];
      if (devType) {
        if (!!(roomDoctorInfo.apiData?.length)) {
          return roomDoctorInfo.apiData.slice(0, 1);
        } else {
          temp.push({})
          return temp;
        }
      } else {
        if (!!(roomDoctorInfo.mockData?.length)) {
          return roomDoctorInfo.mockData.slice(0, 1);
        } else {
          temp.push({})
          return temp;
        }
      }
    },

    // 获取科室信息
    getRoomDeptInfo() {
      let devType = (this.devType);
      let roomDoctorInfo = this.$store.getters['getRoomDeptInfo'];
      if (devType) {
        return roomDoctorInfo.apiData;
      } else {
        return roomDoctorInfo.mockData;
      }
    },

    // 候诊患者截取
    getWaitingPatientList() {
      return function (row) {
        let {waitPatientType, waitPatientNumber, waitPatientMode} = (this.optionsInfo);
        switch (waitPatientType) {
          case 1:
            if (!!row && !!(row.length)) {
              return row.slice(0, waitPatientMode)
            } else {
              return [];
            }
          case 2:
            if (!!row && !!(row.length)) {
              return row.slice(0, waitPatientNumber)
            } else {
              return [];
            }
        }
      }
    },

    getDeptRoomInfo() {
      let {checkedList, roomNameKey, registerObjNameKey} = this.optionsInfo;
      let info = (this.getRoomDeptInfo);
      let type = checkedList[0];
      switch (type) {
        case 'deptName':
          return info['deptName'] || '\u00a0';
        case 'roomName':
          return info[roomNameKey] || info['roomName'] || '\u00a0';
        case 'registerObjName':
          return (this.getParentRegisterObjName) || info['registerObjName'] || '\u00a0'
      }
    }
  },

  created() {
    this.registerToRefList();
    this.initEventHandler();
    this.handleOnCreated();
  },

  mounted() {
    this.handleOnMounted();
  },

  methods: {
    // 接收父组件传递过来的数据
    executeMethod(key, data) {
      switch (key) {
        case "roomDoctorInfo":
          console.log(`医生信息-${data}`);
          this.$store.dispatch('setRoomDoctorInfo', this.$lodash.cloneDeep(data))
          break
        case "roomDeptInfo":
          console.log(`科室信息-${data}`)
          this.$store.dispatch('setRoomDeptInfo', data)
          break
      }
    },
  },

  watch: {
    field: {
      handler: function (val) {
        this.compsKey = uuid();
        let key = (val.options.config);
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },

};
</script>

<style lang="scss" scoped>
.scene-DRC-patient-info-widget {
  color: #333;
  height: 150px;
  font-size: 40px;
  padding: 28px 30px 0 30px;
  display: flex;
  width: 100%;
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;
  background: transparent;

  //科室
  .dept-room {
    padding: 14px 32px 14px 32px;
    background: #0059B3;
    height: 350px;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;

    p {
      color: #FFFFFF;
      text-align: center;
      font-size: 80px;
    }

    .dept-name {
      font-size: 100px;
      line-height: 1.4;
      @include singleEllipsis(100%);

      :deep(.van-notice-bar) {
        @include fontWeight();
        background: transparent;
        height: 100%;
        width: 100%;
        font-size: 44px;

        .van-notice-bar__wrap {
          height: 100%;
          margin: 0 auto;
          min-height: 120px;
          @include fontWeight();
          color: #333333;
          font-size: 44px;
          overflow: hidden;
          width: 100%;

          > div {
            font-size: 80px;
            font-weight: normal;
            line-height: 120px;
            color: white;
          }
        }
      }
    }

    .room-number {
      font-size: 110px;
      font-weight: normal;
      line-height: 1.4;
      @include singleEllipsis(100%);
      margin-top: 8px;
      border-radius: 8px;
    }

  }

  .dept-info-1 {
    .dept-name {
      height: 100%;
      font-size: 160px;
      box-sizing: border-box;

      :deep(.van-notice-bar) {
        box-sizing: border-box;

        .van-notice-bar__wrap {
          > div {
            font-size: 180px !important;
          }
        }
      }
    }
  }

  //患者信息
  .patient-info {
    margin-top: 44px;
    height: auto !important;
    flex-grow: 1;

    .item {
      display: flex;
      overflow: hidden;
      border-radius: 20px;

      .title {
        color: white;
        align-items: center;
        align-self: center;
        text-align: center;
        height: 100%;
        padding: 0 30px;
        line-height: 90px;
        flex: inherit;
        display: flex;
        width: 124px;
        font-size: 60px;
      }

      .content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        align-self: center;
        align-items: baseline;
        justify-content: left;
        background: transparent;
        border: none;
        overflow: hidden;
        height: auto;
        width: calc(100% - 124px) !important;

        p {
          font-size: 126px;
          width: 100%;
          text-align: left;
          line-height: 1.4;
          padding-left: 60px;
        }

        :deep(.scroll) {
          width: 100%;
          height: 100%;
          min-height: 320px;
          display: flex;
          align-self: center;
          align-items: baseline;

          > div {
            width: 100%;
          }

          .inside-content {
            height: 100%;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-self: flex-start;
            align-items: flex-start;
            overflow: hidden;

            .patient {
              height: auto;
              box-sizing: border-box;
              overflow: hidden;
              font-size: 76px;
              width: 100%;
              line-height: 116px;
              text-align: left;
              padding-left: 30px;
              color: rgba(229, 134, 2, 1);

              .patient-orderNo {
                padding-right: 4px;
              }
            }
          }

          .scroll-area-1 {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            flex-direction: column;

            .patient {
              flex-basis: 100%;
              min-width: 100%;
              font-size: 188px;
              text-align: left;
              box-sizing: border-box;
              padding-left: 60px;
              line-height: 1.4 !important;
            }
          }

          .scroll-area-2 {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            width: 100%;

            .patient {
              flex-basis: auto;
              min-width: 100%;
              font-size: 160px;
              text-align: left;
              box-sizing: border-box;
              padding-left: 60px;
              line-height: 1.4 !important;
            }
          }

          .scroll-area-3,
          .scroll-area-4 {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;

            .patient {
              font-size: 140px;
              text-align: left;
              box-sizing: border-box;
              padding-left: 30px;
              line-height: 1.4 !important;
            }
          }

          .scroll-area-5,
          .scroll-area-6 {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;

            .patient {
              flex-basis: auto;
              min-width: 100%;
              font-size: 80px;
              text-align: left;
              box-sizing: border-box;
              padding-left: 30px;
              line-height: 1.4 !important;
            }
          }

          .scroll-area-1-1 {
            display: flex;
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            align-self: center;
            align-items: center;
            flex-direction: column;

            .patient {
              flex-basis: 100%;
              min-width: 100%;
              font-size: 120px;
              text-align: center;
              box-sizing: border-box;
              padding-left: 60px;
              line-height: 188px !important;
            }
          }

          .scroll-area-2-2 {
            display: flex;
            width: 100%;
            height: 100%;
            flex-wrap: wrap;
            align-self: center;
            align-items: center;
            flex-direction: column;

            .patient {
              flex-basis: 100%;
              min-width: 100%;
              font-size: 100px;
              text-align: center;
              box-sizing: border-box;
              line-height: 148px !important;
            }
          }
        }

        :deep(.scroll-area-center) {
          display: flex;
          align-self: center;
          align-items: center;
        }

        :deep(.scroll-hide-waiting) {
          height: 470px;

          .item {
            width: 100%;
            display: flex;
            padding-left: 60px;
            text-align: center;
          }
        }

        .no-scroll-area {
          width: 100%;
        }

        .no-scroll-area-1 {
          display: flex;
          width: 100%;
          flex-wrap: wrap;
          flex-direction: column;

          p {
            flex-basis: 100%;
            min-width: 100%;
            font-size: 188px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 60px;
            line-height: 188px !important;
          }
        }

        .no-scroll-area-2 {
          display: flex;
          flex-wrap: wrap;
          flex-direction: column;
          width: 100%;

          p {
            flex-basis: auto;
            min-width: 100%;
            font-size: 160px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 60px;
            line-height: 218px !important;
          }
        }

        .no-scroll-area-3,
        .no-scroll-area-4 {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;

          p {
            font-size: 140px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 30px;
            line-height: 178px !important;
          }
        }

        .no-scroll-area-5,
        .no-scroll-area-6 {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;

          p {
            flex-basis: auto;
            min-width: 100%;
            font-size: 90px;
            text-align: left;
            box-sizing: border-box;
            padding-left: 30px;
            line-height: 128px !important;
          }
        }

      }

      .current-patient-info {
        height: 100%;
        display: flex;
        align-self: center;
        align-items: center;

        .scroll-info {
          width: 100%;
          overflow: hidden;
          margin-top: 10px;
          box-sizing: border-box;
          align-self: start;

          p {
            height: 100%;
            width: 100%;
            display: flex;
            font-size: 90px;
            line-height: 150px;
            align-items: flex-start;
            @include singleEllipsis(100%)
          }
        }
      }

      .scroll-area-all {
        align-items: start;
        align-self: auto;
      }

      .scroll-area-part {
        align-items: start;
        align-self: auto;
      }
    }

    // 当前患者
    .current-patient {
      height: 400px;
      min-width: 100%;
      background: rgba(0, 89, 179, 0.2);

      .title {
        background: rgba(0, 89, 179, 1);
      }

      .content {
        align-self: center;
        align-items: center;
      }

      p {
        color: rgba(0, 89, 179, 1);
      }
    }

    //候诊患者
    .wait-patient {
      margin-top: 38px;
      min-width: 100%;
      height: calc(100% - 438px);
      background: rgba(255, 198, 85, 0.2);

      .title {
        height: 100%;
        background: rgba(229, 134, 2, 1);
      }

      p {
        color: rgba(229, 134, 2, 1);
        line-height: 186px !important;
        @include singleEllipsis(100%);
      }
    }

  }

  //候诊等待
  .patient-info-1 {
    height: calc(100% - 410px) !important;

    .scroll-info-4-wrap {
      align-self: start !important;
    }

    .scroll-info-1,
    .scroll-info-2 {
      align-items: center !important;

      p {
        font-size: 160px !important;
        line-height: 1.4 !important;
      }
    }

    .scroll-info-3 {
      align-items: center !important;

      p {
        font-size: 140px !important;
        line-height: 1.4 !important;
      }
    }

    .scroll-info-4 {
      overflow: hidden;
      align-items: start !important;
      align-self: start !important;
      display: flex;

      p {
        flex-grow: 1;
        font-size: 110px !important;
        line-height: 1.4 !important;
      }
    }
  }

  //候诊列表
  .patient-info-2 {
    height: calc(100% - 410px) !important;

    .no-scroll-area-part,
    .scroll-area-part {
      align-self: center !important;
      align-items: center !important;
    }

    .no-scroll-area-all,
    .scroll-area-all {
      align-self: start !important;
      align-items: start !important;
    }

    :deep(.scroll-area-part) {
      .scroll .scroll-list-info-1 {
        .patient {
          flex-grow: 1;
          font-size: 160px !important;
          line-height: 1.4 !important;
        }
      }

      .scroll .scroll-list-info-2 {
        .patient {
          flex-grow: 1;
          font-size: 160px !important;
          line-height: 1.4 !important;
        }
      }

      .scroll .scroll-list-info-3 {
        .patient {
          flex-grow: 1;
          font-size: 140px !important;
          line-height: 1.4 !important;
        }
      }

      .scroll .scroll-list-info-4 {
        .patient {
          flex-grow: 1;
          font-size: 110px !important;
          line-height: 1.4 !important;
        }
      }
    }

    :deep(.scroll-area-all) {
      .scroll .scroll-list-info-1 {
        .patient {
          flex-grow: 1;
          font-size: 160px !important;
          line-height: 1.4 !important;
        }
      }

      .scroll .scroll-list-info-2 {
        .patient {
          flex-grow: 1;
          font-size: 160px !important;
          line-height: 1.4 !important;
        }
      }

      .scroll .scroll-list-info-3 {
        .patient {
          flex-grow: 1;
          font-size: 140px !important;
          line-height: 1.4 !important;
        }
      }

      .scroll .scroll-list-info-4 {
        .patient {
          flex-grow: 1;
          font-size: 110px !important;
          line-height: 1.4 !important;
        }
      }
    }

    .scroll-list-info-1,
    .scroll-list-info-2 {
      align-items: center !important;

      p.patient {
        font-size: 160px !important;
        line-height: 1.4 !important;
      }
    }

    .scroll-list-info-3 {
      align-items: center !important;

      p.patient {
        font-size: 140px !important;
        line-height: 1.4 !important;
      }
    }

    .scroll-list-info-4 {
      display: flex;
      flex-direction: column;
      align-items: center !important;

      p.patient {
        flex-grow: 1;
        font-size: 110px !important;
        line-height: 1.4 !important;
      }
    }
  }
}
</style>
